$(document).ready(function () {
    "use strict";
    var iscreate = true;
    var opt2 = {
        controls: [{
            name: "usermodal",
            type: "modal",
            body: [
                {
                    type: "gridtable",
                    name: "modalgriduser"
                }
            ]
        },
            {
                type: "row",
                controls: [{
                    type: "header", title: "Role Management", breadcrumb: "roles",
                    toolbarbutton: [
                                { type: "btn", name: "btnCreate", text: "create", color: "blue", icon: "plus", onClick: create },
                                { type: "btn", name: "btnEdit", text: "Edit", color: "green", icon: "edit", onClick: edit },
                                { type: "btn", name: "btnDelete", text: "Delete", color: "red", icon: "times", onClick: deleted },
                                { type: "btn", name: "btnSave", text: "Save", color: "purple", icon: "save", cls: "hide", onClick: save },
                                { type: "btn", name: "btnCancel", text: "Cancel", color: "yellow", icon: "undo", cls: "hide", onClick: cancel }
                    ]
                }
                ]
            },
        {
            type: "row",
            controls: [
                {
                    type: "portlet", name: "pnlfilter", color: "green", title: "Role List", icon: "home", hidetool: ["remove", "config"],
                    body: [
                        {
                            type: "gridtable",
                            name: "gridrole"
                        }
                    ]

                }
            ]
        },
        {
            type: "row",
            controls: [
                {
                    type: "portlet", mustvalid:true, name: "pnlInput", color: "purple", title: "Manage Role", icon: "home", hidetool: ["remove", "config"], hidden: true,
                    body: [
                            {

                                type: "formgroup",
                                controls: [
                                       { name: "roleid", type: "textbox", label: "Role ID", clslabel: "col-md-3", cls: "col-md-5", placeholder: "employee name", required: true, minlength: 5 }
                                ]
                            },
                            {
                                type: "formgroup",
                                controls: [
                                        { name: "rolename", type: "textbox", label: "Role Name", clslabel: "col-md-3", cls: "col-md-5", placeholder: "employee name", required: true }
                                ]
                            },
                            {
                                type: "formgroup",
                                controls: [
                                        { name: "isactive", type: "switch", label: "Is Active", labelon: 'YA', labeloff: 'Tidak', clslabel: "col-md-3", cls: "col-md-5", placeholder: "employee name", required: true }
                                ]
                            }
                    ]
                }]
        }
        ]
    }

    var widget = new PageEngine(opt2);
    widget.render(init);
    function searchemployee() {
        refreshsrcemployee();
    }


    function init() {
        
        refreshgrid();
    }

    function deleted() {
        var rslt = widget.submit(widget.getbaseurl() + 'scp/admin/role/delete',
            { cb: JSON.stringify(widget.getSelectedGridRow("gridrole")) }, true);
        if (rslt.success) {
            widget.showmessage([{ msg: "data has been deleted", title: "Done", type: "success" }]);
        }
        refreshgrid();
    }
    function create() {
        iscreate = true;
        widget.clearcontrol("#pnlInput");
        widget.showonlyportlet("pnlInput");
        widget.showbuttontoolbar("#btnSave,#btnCancel");
        widget.readonly({ name: "#roleid", readonly: false });
    }

    function edit() {        
        var rows = $("#griduser").dataTable().fnGetNodes();
        var cb = $("#griduser input:checked");
        if (cb.length == 0) {
            widget.showmessage([{ type: "error", msg: "please select data first", title: "error edit" }]);
        }
        else if (cb.length > 1) {
            widget.showmessage([{ type: "error", msg: "multiple edit is not active yet", title: "error edit" }])
        }
        else {
            edituser(cb.val());
        }
    }

    function cancel() {
        widget.showonlyportlet("pnlfilter");
        widget.showbuttontoolbar("#btnCreate,#btnEdit,#btnDelete");
    }

    function save() {        
        if (widget.isvalid() == false) {
            console.log('not valid');
        }
        else {            
            var data = $("#pnlInput").serializeObject();            
            data.iscreate = (iscreate?iscreate:0);

            var rslt = widget.submit(widget.getbaseurl() + 'scp/admin/role/save', data, true);
            if (rslt.success) {
                widget.showmessage([{ msg: "data saved successfully", title: "Done", type: "success" }]);
            }
            else {
                widget.showmessage([{ msg: "Failed to Save." +rslt.message, title: "Error", type: "error" }]);
            }
            widget.showonlyportlet('pnlfilter');
            widget.showbuttontoolbar("#btnCreate,#btnEdit,#btnDelete");
            refreshgrid();
        }
    }

    function editrole(data) {
        iscreate = false;
        widget.populatedata({url: "api/admin/apirole/roles/" + data }, "#pnlInput");
        widget.showonlyportlet("pnlInput");
        widget.showbuttontoolbar("#btnSave,#btnCancel");
        // widget.readonly({ name: "#roleid", readonly: true });
        //$("#roleid").val(data[1])
        //$("#rolename").val(data[2])
        //$("#isactive").val(data[3])
        //widget.populate(data, "#pnlInput");
        //widget.populate(data[1], "#pnlInput");
        widget.readonly({ name: "#roleid" });

    }

    function refreshgrid() {
        var data = $("#pnlfilter").serializeObject();
        widget.reloadgrid({
            url: "api/admin/grid/roles",
            name: "gridrole",
            checkbox: true,
            key: "roleid",
            filter: true,            
            columns: [           
            {                mData: "roleid", sTitle: "RoleId "   },
            { mData: "rolename", sTitle: "Role Name" },
            {
                mData: "isactive", sTitle: "Is Active",
                mRender: function (data) {                    
                    return (data == 0 ? 'Not Active' : 'Active');
                }
            }
            ],
            callback: function (data) {
                
                editrole(data[1]);
            }
        });

    }



});